<template>
  <div class="home-view">
    <!-- yeyou -->
    <!-- 中国地图/轮播图 -->
    <div id="setp-a">
      <fy-china />
    </div>

    <!-- 八大菜系 -->
    <div id="setp-b">
      <div class="setp-b-body">
        <h1>八大菜系@非遗美食</h1>
        <h3>Delicacy</h3>
        <!-- 菜系导航栏-->
        <ul>
          <li v-for="(x, i) in eight" :key="i">
            <span @click="eightStyle(x)">{{ x }}</span>
          </li>
        </ul>
        <!-- 菜系详情栏 -->
        <div id="cuisine-list" class="h-full" v-if="Edata">
          <ul>
            <li v-for="(x, i) in Edata.data.slice(0, 8)" :key="i" @click="goNav(x.name)">
              <img :src="`https://ichf.cn${x.image}`" alt="" />
              <div class="list-comment_1">
                <h3 style="color: rgb(248 113 113); padding: 5px">
                  {{ x.name }}
                </h3>
                <p style="font-size: 16px">非遗{{ x.style }}({{ x.area }} )</p>
              </div>
              <div class="list-comment_2">
                <svg t="1660305872728" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="8304" width="50" height="40">
                  <path
                    d="M774.8 327.8c-50.6-4.8-97.3 4.3-131 22.7 15.9 20.3 26.1 52.1 26.1 87.9 0 29.2-6.8 55.7-17.9 75.5 28.3 16.9 64.5 28.8 104.6 32.6 96.7 9.2 179.2-32.4 184.2-92.8s-69.3-116.7-166-125.9z"
                    fill="#FFB89A" p-id="8305"></path>
                  <path
                    d="M67.2 494l1 31c2.2 67.7 26.2 133.6 69.6 190.4 41.6 54.5 99.6 99.2 167.9 129.3 15.2 6.7 32.9-0.2 39.5-15.4 6.7-15.2-0.2-32.9-15.4-39.5-59-26-108.9-64.3-144.4-110.8-29-38-47.5-80.7-54.4-125h762.6c-7 44.8-25.8 87.9-55.4 126.3-36.1 46.8-86.8 85.2-146.8 110.9-15.2 6.5-22.2 24.2-15.7 39.4 4.9 11.4 15.9 18.2 27.6 18.2 4 0 8-0.8 11.8-2.4 144.5-62.2 237-185.3 241.3-321.4l1-31H67.2z"
                    fill="#45484C" p-id="8306"></path>
                  <path
                    d="M591.9 800.1h-159c-35.2 0-64.1 28.8-64.1 64.1s28.8 64.1 64.1 64.1h159c35.2 0 64.1-28.8 64.1-64.1s-28.9-64.1-64.1-64.1z m0 68.1h-159c-2.1 0-4.1-2-4.1-4.1s2-4.1 4.1-4.1h159c2.1 0 4.1 2 4.1 4.1s-2 4.1-4.1 4.1z"
                    fill="#45484C" p-id="8307"></path>
                  <path
                    d="M498.1 373.5c-9.6-13.5-28.4-16.6-41.9-6.9-13.5 9.6-16.6 28.4-6.9 41.9 10.8 15.1 16.6 33 16.6 51.7 0 16.6 13.4 30 30 30s30-13.4 30-30c0-31.4-9.6-61.4-27.8-86.7zM432.4 321.8c-17.7-7.1-36.3-10.7-55.5-10.7-82.2 0-149 66.8-149 149 0 16.6 13.4 30 30 30s30-13.4 30-30c0-49.1 39.9-89 89-89 11.5 0 22.6 2.1 33.1 6.4 15.4 6.2 32.8-1.3 39-16.7 6.2-15.4-1.2-32.9-16.6-39z"
                    fill="#33CC99" p-id="8308"></path>
                  <path
                    d="M549.4 274.7c-46.7-45.6-107.7-70.8-171.8-70.8-64.1 0-125.1 25.1-171.8 70.8-46.1 45.1-74 106-78.6 171.4-1.2 16.5 11.3 30.9 27.8 32 16.5 1.1 30.9-11.3 32-27.8 3.5-50.8 25.1-97.9 60.7-132.7 35.4-34.6 81.5-53.7 129.9-53.7 48.3 0 94.5 19.1 129.9 53.7 35.6 34.8 57.1 81.9 60.7 132.7 1.1 15.8 14.3 27.9 29.9 27.9 0.7 0 1.4 0 2.1-0.1 16.5-1.2 29-15.5 27.8-32-4.6-65.4-32.5-126.3-78.6-171.4zM895.1 385.9c-11.5-19.4-27.7-36.6-48.1-51.2l53.9-58.3c11.2-12.2 10.5-31.2-1.7-42.4s-31.2-10.5-42.4 1.7l-65 70.4c-5-1.8-10.1-3.5-15.3-5l82.4-159.2c7.6-14.7 1.9-32.8-12.9-40.4-14.7-7.6-32.8-1.9-40.4 12.9l-91.2 176.3c-5.5-0.3-11.1-0.5-16.7-0.5-21.9 0-43.5 2.4-64.3 7.2-16.1 3.7-26.2 19.8-22.5 36 3.7 16.1 19.8 26.2 36 22.5 16.3-3.8 33.4-5.7 50.7-5.7 43.6 0 84.2 11.8 114.3 33.3 27.1 19.3 42 44 42 69.5 0 16.6 13.4 30 30 30s30-13.4 30-30c0-23.5-6.3-46.1-18.8-67.1z"
                    fill="#45484C" p-id="8309"></path>
                </svg>
              </div>
              <div class="list-comment_3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-900" fill="none" viewBox="0 0 24 24"
                  stroke="currentColor" width="35" height="25">
                  <path strokelinecap="round" strokelinejoin="round" strokewidth="2"
                    d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
                  </path>
                </svg>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 标签云 -->
    <div id="setp-c">
      <fy-titleyun />
    </div>
    <!-- 非遗美食 中国 -->
    <div id="setp-d">
      <div class="foot-1">
        <h1>非遗美食◉中国</h1>
        <span>Intangible Cultural Heritage Food @ China</span>
      </div>
      <div class="foot-2">
        <img src="/image/indexfoot.jpg" alt="" />
      </div>
      <div class="foot-3">
        <p>“传承华夏美食，弘扬中国文化”</p>
        <p>
          本着“传承华夏美食，弘扬中国文化”的精神宣传非遗美食，讲非遗故事、展非遗价值、促非遗保护。
        </p>
        <p>
          在我国国家级非遗代表性项目中，餐饮类项目主要集中在传统技艺类，尤以传统烹饪、食品加工制作、酿酒、酿醋、制茶等技艺为代表，其技艺持有者不乏百姓耳熟能详的传统老字号。经初步统计，截止2020年，食品类国家级非遗代表性项目共116个...
        </p>
      </div>
    </div>
    <!-- rou -->
  </div>
</template>

<script>
import FyChina from "@/components/FyChina.vue";
import FyTitleyun from "@/components/FyTitleyun.vue";
export default {
  components: { FyChina, FyTitleyun },
  data() {
    return {
      Edata: null,
      // 导航栏
      eight: ["川菜", "粤菜", "鲁菜", "湘菜", "闽菜", "浙菜", "苏菜", "徽菜"],
    };
  },
  mounted() {
    // 首加载
    this.eightStyle("川菜");
  },
  methods: {
    // 查询八大菜系
    eightStyle(e) {
      // console.log(e);
      let url = "/index/style?style=" + e;
      this.axios.get(url).then((res) => {
        // console.log(res);
        this.Edata = res.data;
      });
    },
    goNav(e) {
      // console.log(e);
      this.$router.push("/nav?name=" + e);
    },
  },
  watch: {},
};
</script>
<style lang="scss">
a {
  user-select: none;
}

.setp-b-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  h1 {
    font-family: "Courier New", Courier, monospace;
    padding: 20px;
  }

  >h3 {
    color: rgb(107, 114, 128);
    // margin: 20px 0;
  }

  ul {
    display: flex;
    list-style-type: none;
    justify-content: space-evenly;
    margin: 20px 0;
    // top: 20px;

    align-content: center;
    width: 100%;
    font-size: 15px;
    color: rgba(71, 71, 71, 0.849);
    user-select: none;

    span {
      display: inline-block;
      cursor: pointer;
      padding: 0 20px;

      &::before {
        width: 10px;
        height: 10px;
        border: 1px solid #7d7d7d;
        border-radius: 100%;
        margin-right: 10px;
        display: inline-block;
        content: "";
      }
    }
  }

  #cuisine-list {

    // width: 100%;
    // height: 100%;
    // background-color: white;
    ul {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-gap: 1rem;
      gap: 1rem;

      li {
        position: relative;
        width: 100%;
        height: 30vh;
        border-radius: 10px;
        cursor: pointer;
        overflow: hidden;

        img {
          // height: 18vw;
          width: 100%;
          height: 100%;
          -webkit-transition: 0.4s;
        }

        .list-comment_1 {
          position: absolute;
          top: -4rem;
          left: 60px;
          width: 60%;
          height: 55px;
          border-radius: 10px;
          background-color: rgba(255, 247, 247, 0.603);
          -webkit-transition: 0.3s;
        }

        .list-comment_2 {
          position: absolute;
          bottom: -3rem;
          left: 8rem;
          border-radius: 10px;
          background-color: rgba(248, 113, 113, 0.829);
          -webkit-transition: 0.3s;
        }

        .list-comment_3 {
          position: absolute;
          bottom: 0;
          right: 0;
          border-top-left-radius: 5px;
          background-color: rgba(214, 213, 213, 0.637);
          -webkit-transition: 0.3s;
        }

        &:hover {
          .list-comment_1 {
            transition: 0.3s;
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translateX(-50%);
          }

          .list-comment_2 {
            transition: 0.3s;
            position: absolute;
            bottom: 20%;
            left: 50%;
            transform: translateX(-50%);
          }

          .list-comment_3 {
            transition: 0.3s;
            position: absolute;
            right: -5rem;
          }

          img {
            transform: scale(1.3);
            transition: 0.3s linear;
          }
        }
      }
    }
  }
}

#setp-d {
  .foot-1 {
    text-align: center;
    padding: 20px;

    h1 {
      padding: 20px 0 10px 0;
      font-family: "Courier New", Courier, monospace;
    }

    span {
      color: #6b7280;
    }
  }

  .foot-2 {
    width: 100%;
    height: 270px;
    overflow: hidden;
    position: relative;
    margin: 2rem 0;

    img {
      width: 100%;
      position: absolute;
      top: -23rem;
    }
  }

  .foot-3 {
    p {
      color: #6b7280;
      padding: 5px;
    }

    padding: 10px;
    text-align: center;
  }
}
</style>

<style>
#setp-a {
  background-image: url("../assets/indexbackground/indexbackground1.jpg");
  background-position: center;
  width: 100%;
  height: 100vh;
}

#setp-b {
  background-image: url("../assets/indexbackground/indexbackground2.jpg");
  background-position: center;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 40px;
  text-align: center;
}

#setp-c {
  background-image: url("../assets/indexbackground/indexbackground3.png");
  background-position: center;
  width: 100%;
  height: 100vh;
}

#setp-d {
  background-image: url("../assets/indexbackground/indexbackground2.jpg");
  background-position: center;
  width: 100%;
  height: 100vh;
}
</style>
